<!-- 我是自营 -->
<template lang="html">
  <div class="changguiBox">
    <el-row class="formBox box1">
        <el-col :span="2" class="text-right headLable">
          <span>订单号：</span>
        </el-col>
        <el-col :span="4" class="text-left">
          <el-input v-model="form.orderNo" size="small" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="2" class="text-right">
          <span>产品名：</span>
        </el-col>
        <el-col :span="4" class="text-left">
          <el-input v-model="form.productName" size="small" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="2" class="text-right">
          <span>下单时间：</span>
        </el-col>
        <el-col :span="4" class="text-left">
          <el-input v-model="form.orderTime" size="small" placeholder="请输入内容"></el-input>
        </el-col>
    </el-row>
    <el-row class="formBox">
      <el-col :span="2" class="text-right headLable">
        <span>客户名：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-input v-model="form.userName" size="small" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="2" class="text-right">
        <span>客户手机：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-input v-model="form.userPhone" size="small" placeholder="请输入内容"></el-input>
      </el-col>
    </el-row>
    <el-row class="formBox box2">
       <el-col :span="2" :offset="2" class="text-left" style="margin-left:80px;">
         <el-button type="success" size="small" @click="find">筛选</el-button>
       </el-col>
    </el-row>

    <el-row class="tableBox" v-loading.body="$store.state.TanGoods.loading">
      <ul class="listBox2">
          <li class="first">
            <span class="order">订单号</span>
            <span class="name">产品名</span>
            <span class="price">单价</span>
            <span class="numb">数量</span>
            <span class="pay">实付</span>
            <span class="customer">客户</span>
            <span class="downTime">下单时间</span>
            <span class="updateTime">更新时间</span>
            <span class="orderType">订单状态</span>
          </li>
          <li v-for="item in $store.state.TanGoods.selfList">
            <span class="order">{{item.orderNo}}</span>
            <span class="name text-left">
              <p>{{item.productName}}</p>
            </span>
            <span class="price text-left green">{{item.price}}</span>
            <span class="numb text-left">x{{item.count}}</span>
            <span class="pay text-left">{{item.payPrice}}</span>
            <span class="customer text-left">
              <p>{{item.customerName}}</p>
              <p>{{item.customerPhone}}</p>
            </span>
            <span class="downTime">
              <p>{{item.createTime | getDate}}</p>
              <p>{{item.createTime | getTime}}</p>
            </span>
            <span class="updateTime">
              <p>{{item.updateTime | getDate}}</p>
              <p>{{item.updateTime | getTime}}</p>
            </span>
            <span class="orderType green">
              已付款
            </span>
          </li>
      </ul>
    </el-row>
    <el-row class="text-right" style="margin-top:10px;">
      共{{this.$store.state.TanGoods.total}}条
      <span style="display:inline-block; min-width:100px;">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="100"
          layout="prev, pager, next, jumper"
          :page-count="$store.state.TanGoods.pages">
        </el-pagination>
      </span>
    </el-row>
  </div>
</template>

<script>
export default {
  data(){
    return {
      form:{
        orderNo:'',
        productName:'',
        orderTime:'',
        userName:'',
        userPhone:''
      },
      checked:true,
      options: [{
        value: '选项1',
        label: '选项1'
      }, {
        value: '选项2',
        label: '选项2'
      }, {
        value: '选项3',
        label: '选项3'
      }, {
        value: '选项4',
        label: '选项4'
      }, {
        value: '选项5',
        label: '选项5'
      }],
      page:1
    }
  },
  filters:{
    getDate:function (val){
      var date=new Date();
      date.setTime(val);
      var year = date.getFullYear();
      var month= date.getMonth()+1;
      if(month<10){
        month='0'+month;
      }
      var day=date.getDate();
      if(day<10){
        day='0'+day;
      }
      return year+"-"+month+"-"+day;
    },
    getTime:function (val){
      var date=new Date();
      date.setTime(val);
      var hours=date.getHours();
      if(hours<10){
        hours='0'+hours;
      }
      var minutes=date.getMinutes();
      if(minutes<10){
        minutes='0'+minutes;
      }
      return hours+":"+minutes
    }
  },
  methods:{
    find:function (){
      this.getList();
    },
    handleCurrentChange:function (){
      this.getList();
    },
    getList:function (){
      this.$store.dispatch('showLoading','TanGoods');
      var json1={
        'orderNo':this.form.orderNumb,
        'orderTime':this.form.orderTime,
        'otaPlatform':'',
        'pageCount':5,
        'pageIndex':this.page,
        'productName':this.form.productName,
        'sort':'',
        'status':'',
        'type':4,
        'userName':this.form.userName,
        'userPhone':this.form.userPhone
      };
      console.log(json1);
      this.$store.dispatch('getAllGoodsList',json1);
    },
    changeDialog:function (type,id){
      var json1={
        'type':type,
        'name':'TanGoods',
        'id':id,
        'title':'订单详情'
      }
      this.$store.dispatch('changeDialog',json1);
    }
  },
  watch:{
    activeName(val){
      this.getList();
    }
  },
  created(){
    this.getList();
  }
}
</script>

<style lang="Sass" scoped>
  .changguiBox{width: 100%; height: 100%;padding: 20px 10px 10px 10px; box-sizing: border-box;

    .formBox{ background: #fff; padding: 10px; text-align: left;

      .text{ height: 30px;
        .el-input__inner{height: 30px; width: 100%;}
      }
      .date{width: 150px; height: 30px;
        .el-input__inner{height: 30px; width: 100%;}
      }
      .select{width: 120px;
        .el-input__inner{width: 100%;}
      }
    }
    span{font-size: 12px; line-height: 30px;}
    .box1{border-radius: 10px 10px 0 0; padding: 20px 10px 0 10px;}
    .box2{border-radius: 0 0 10px 10px; padding: 0 10px 20px 10px;}
    .tableBox{background: #fff; padding: 20px; margin-top: 20px; border-radius: 10px;}
    .cell{text-align: left;}
    .btn{height: 32px;
      span{line-height: 0px; display: block; }
    }
  }
  .text-left{text-align: left;}
  .text-right{text-align: right;}
  .heightAll{height: 100%;}

  .listBox2{width: 100%; background: #fff;

    .first{display: flex; height: 30px; line-height: 30px; text-align: left; padding: 0;

        span{display: inline-block; font-size: 12px; }
        .order{flex: 0 0 220px;
          .el-checkbox__inner{width: 14px; height: 14px; margin-top: 10px;}
          .el-checkbox__inner::after{left: 3px; top:0px;}
        }
        .name{flex: 1;}
        .price{flex: 0 0 80px;}
        .numb{flex: 0 0 50px;}
        .pay{flex: 0 0 80px;}
        .customer{flex: 0 0 110px;}
        .downTime{flex: 0 0 90px; line-height: 30px; margin-top: 0px;}
        .updateTime{flex: 0 0 80px; line-height: 30px; margin-top: 0px;}
        .orderType{flex: 0 0 80px;}
    }
    li{display: flex; height: auto; line-height: 30px; text-align: left; padding: 5px 0;

      span{display: inline-block; box-sizing: border-box;}
      .order{flex: 0 0 220px; height: auto;

        .el-checkbox__inner{width: 14px; height: 14px; margin-top: 10px;}
        .el-checkbox__inner::after{left: 3px; top:0px;}
      }
      .name{flex: 1;
        p{line-height: 18px; margin-top: 5px;width: 90%;}
      }
      .price{flex: 0 0 80px;}
      .numb{flex: 0 0 50px;}
      .pay{flex: 0 0 80px;}
      .customer{flex: 0 0 110px;
        p{line-height: 12px; margin-top: 5px; font-size: 12px;}
      }
      .downTime{flex: 0 0 90px; line-height: 16px; margin-top: 5px;
        p{margin: 0; height: 14px; font-size: 12px;}
      }
      .reason{flex: 0 0 90px;
        p{margin: 0; height: 16px; line-height: 14px;font-size: 12px; margin-top: 5px;}
      }
      .updateTime{flex: 0 0 80px; line-height: 14px; margin-top: 5px;
        p{margin: 0; height: 14px; font-size: 12px;}
      }
      .orderType{flex: 0 0 80px;}
    }

  }
</style>
